<template>
    <div>
        <div class="searchHeader">
            <el-input v-model="keyWords" placeholder="请输入搜索关键字..." class="articleSearchText" size="mini"></el-input>
            <el-button size="mini" type="primary" icon="el-icon-search">搜索用户</el-button>
        </div>
        <div class="adminCard">
            <el-card class="box-card" v-for="(admin,index) in adminInfos" :key="admin.id">
                <div slot="header" class="clearfix">
                    <span style="color: #409eff">昵称 ： {{admin.nickname}}</span>
                    <el-button style="float: right; padding: 3px 0" type="text"><i style="color: red" class="el-icon-delete"></i></el-button>
                </div>
                <div class="adminInfos">
                    <div class="block userface">
                        <el-avatar size="small" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
                    </div>
                    <ul>
<!--                        <li><span>email</span> : {{admin.email}}</li>-->
                        <li><span>用户名</span> : {{admin.username}}</li>
                        <li class="">
                            <span>是否启用</span> :
                            <el-switch
                                @change="enableChanged(admin.id)"
                                v-model="admin.enabled"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                active-text="启用"
                                inactive-text="禁用">
                            </el-switch>
                        </li>
                        <li>
                            <span>是否锁定</span> :
                            <el-switch
                                    v-model="admin.nonLocked"
                                    active-color="#13ce66"
                                    inactive-color="#ff4949"
                                    active-text="解锁"
                                    inactive-text="锁定">
                            </el-switch>
                        </li>
                        <li>
                            <span>用户角色</span> :
                            <el-select
                                    @change="selectChange(admin.id,admin.role)"
                                    style="width: 240px"
                                    size="mini"
                                    v-model="admin.role"
                                    multiple
                                    filterable
                                    allow-create
                                    default-first-option
                                    placeholder="请选择文章标签">
                                <el-option
                                        v-for="(item,i) in roleInfos"
                                        :key="item.id"
                                        :label="item.rnameZh"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </li>
                    </ul>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Admin",
        data() {
            return {
                selectChanges:{
                    id: '',
                    role : []
                },
                roleInfos: [],
                adminInfos : [],// 操作员信息
                adminInfo:{
                  id : '',
                  enabled : true,
                  nonLocked : true,
                  rid: []
                },
                keyWords: '' // 搜索关键字
            }
        },
        methods :{
            selectChange(id,rids) {
                this.selectChanges.id = id;
                this.selectChanges.role = rids;
                this.$putRequest('/user/updateRole',this.selectChanges).then(resp => {
                    this.initAdminInfos();
                })
            },
            enableChanged(id) {
                let user = {
                    id: id
                }
                this.$putRequest('/user/',user).then(resp => {
                    this.initAdminInfos();
                })
            },
            initAllRoles() { // 查询所有角色
                this.$getRequest('/role/').then(resp => {
                    if(resp){
                        this.roleInfos = resp;
                    }
                })
            },
            initAdminInfos(){
                this.$getRequest('/user/?keyWords='+this.keyWords).then(resp => {
                    if(resp){
                        this.adminInfos = resp;
                    }
                })
            }
        },
        mounted() {
            this.initAllRoles(); // 查询所有角色
            this.initAdminInfos();// 查询每个操作员角色
        }
    }
</script>

<style scoped>
    .searchHeader {
        margin-bottom: 10px;
    }

    .searchHeader .articleSearchText {
        width: 300px;
        margin-right: 10px;
    }

    .clearfix{
        font-size: 14px;
        user-select: none;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 400px;
        margin: 8px 10px;
    }

    .userface {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin: 10px auto;
    }

    .adminInfos ul{
        list-style: none;
        padding:0;
        margin: 0;
        font-size: 14px;
    }

    .adminInfos ul li {
        line-height: 30px;
    }

    .adminInfos ul li span{
        color: #409eff;
    }

    .adminCard{
        display: flex;
        flex-wrap: wrap;
    }
</style>